<template>
    <div class="detail">
        <el-row type="flex" class="header">
            <el-col :span="3">
                <div class="back" @click="back"></div>
            </el-col>
            <el-col :span="18">
                <div>
                    <span>订单详情</span>
                </div>
            </el-col>
            <el-col :span="3"></el-col>
        </el-row>
        <div class="menu">
            <el-row type="flex" style="text-align: center;font-size: 16px;">
                <el-col>退票</el-col>
                <el-col>改签</el-col>
                <el-col>变更到站</el-col>
                <el-col>乘意险</el-col>
                <el-col>餐饮·特产</el-col>
            </el-row>
        </div>
        <div v-show="!loading">
            <div class="orderNum">
                <el-row type="flex" style="text-align: center;">
                    <el-col :span="3" style="color: #487e88;">&nbsp;&nbsp;EG82346458</el-col>
                    <el-col :span="12"></el-col>
                    <el-col :span="9">2018年09月14日</el-col>
                </el-row>
            </div>
            <div class="orderDetail">
                <el-row type="flex">
                    <el-col>&nbsp;&nbsp;2018-09-30 08:00开</el-col>
                    <el-col>上海虹桥 → 杭州东</el-col>
                </el-row>
                <el-row type="flex">
                    <el-col>&nbsp;&nbsp;G85</el-col>
                    <el-col>二等座</el-col>
                    <el-col style="color: #c6734f">13车</el-col>
                    <el-col style="color: #c6734f">02D号</el-col>
                </el-row>
                <el-row type="flex">
                    <el-col>&nbsp;&nbsp;褚达</el-col>
                    <el-col>二代身份证</el-col>
                    <el-col style="color: #c6734f">成人票</el-col>
                    <el-col style="color: #c6734f">73元</el-col>
                </el-row>
                <el-row>
                    <el-col style="color: #4e91c2">
                        &nbsp;&nbsp;车票状态：已支付
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="loading" v-show="loading" style="background-color: #000;width: 100px;height: 100px;margin: 0 auto;border-radius: 8px;opacity: .75 ">
            <img :src="loadImg" style="width: 40px;margin: 20px 30px 0 30px;"/>
            <div style="color: #fff;width: 100%;text-align: center;">加载中...</div>
        </div>
        <img v-show="!loading" style="width: 100%;position: absolute;bottom: 0;left: 0;" src="http://img01.200001.cn/FoXbg-MHuEZ36a06y5KUq5YNykjQ"/>
    </div>
</template>

<script>
    import loadImg from '../../imgs/loading.gif';

    export default {
        name: 'index',
        data() {
            return {
                loading: true,
                loading2: true,
                loadImg: loadImg
            };
        },
        mounted() {
            setTimeout(() => {
                this.loading = false;
            }, 1000);
        },
        methods: {
            back() {
                this.$router.push({path: `/`});
            }
        }
    }
</script>
<style lang='less'>
    .detail {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: 2;
    }
    .loading{
        position: absolute;
        top: 300px;
        left: 150px;
    }
    .back {
        border-bottom: 1.5px solid #fff;
        border-left: 1.5px solid #fff;
        transform: rotate(45deg);
        -ms-transform: rotate(45deg); /* IE 9 */
        -moz-transform: rotate(45deg); /* Firefox */
        -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
        -o-transform: rotate(45deg); /* Opera */
        width: 12px;
        height: 12px;
        margin: 12px auto;
        line-height: 40px;
    }

    .header {
        height: 40px;
        color: #FFFFFF;
        font-size: 20px;
        text-align: center;
        line-height: 40px;
        background-color: #3b99fb;
    }

    .menu {
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        color: #000;
        background-color: #e6e7eb;
    }

    .orderNum {
        font-size: 14px;
        line-height: 30px;
        height: 30px;
        background-color: #efeff1;
    }

    .orderDetail {
        padding-bottom: 5px;
        border-bottom: 1px solid #c9c9c9;
    }

    .title * {
        color: #a6a6a6;
        font-size: 14px;
    }

    .desc * {
        color: #477a8d;
    }
</style>

